<template>
  <view class="home">
    <view class="news-item" v-for="(item,index) in list" :key="item.id">
      <view class="u-flex" @click="$u.route(`/pages/index/newsList/newDetail?id=${item.id}`)">
        <view class="u-flex-1 u-m-r-20">
          <u-text color="#333" bold :text="item.title"></u-text>
        </view>
        <u-image width="180rpx" radius="20rpx" height="180rpx" :src="prefixURL(item.image)"></u-image>
      </view>
      <view class="u-flex-y-center u-flex-between">
        <view class="u-flex-y-center">
          <u-text :prefix-icon="prefixURL(item.user.avatar)" :text="item.user.nickname"
            iconStyle="width:60rpx;height:60rpx;border-radius:50%;margin:0 10rpx;"></u-text>
        </view>
        <view class="u-flex-y-center">
          <u-image src="@/static/images/01_32hk.png" width="24rpx" height="34rpx"></u-image>
          <u-text :text="item.views" margin="0 10rpx" size="13"></u-text>
        </view>
        <view class="u-flex-y-center" @click="_articleLikes(item,index)">
          <u-image :src="item.is_collect?'/static/images/01_45qs.png':'/static/images/01_45mjsde.png'" width="34rpx"
            height="34rpx"></u-image>
          <up-text text="赞" margin="0 10rpx" :color="item.is_collect ?'#F87610':'#666C77'" size="13"></up-text>
        </view>
        <view class="u-flex-y-center" @click="$u.route(`/pages/index/newsList/newDetail?id=${item.id}`)">
          <u-image src="/static/images/01_45mj.png" width="34rpx" height="34rpx"></u-image>
          <u-text text="评价" margin="0 10rpx" size="13" color="#888"></u-text>
        </view>
      </view>
    </view>
  </view>
  <view class="send-btn" @click="$u.route('pages/index/newsList/sendNews')">
    发布文章
  </view>
  <back-page></back-page>
</template>

<script setup>
  import {
    ref
  } from 'vue';
  import { prefixURL } from '../../../util/util';
  import { onShow, onReachBottom } from '@dcloudio/uni-app'
  import { articleLikes, articleList } from '../../../config/api';
  const list = ref([])
  const data = ref({})
  const params = ref({
    page: 1,
    limit: 10
  })
  onReachBottom(() => {
    params.value.page++
    _articleList()
  })
  onShow(() => {
    _articleList()
  })
  const _articleLikes = (item, index) => {
    articleLikes({ id: item.id }).then(res => {
      uni.$u.toast(res.msg, { mask: true })
      list.value[index].is_collect = !list.value[index].is_collect
    })
  }
  // 文章列表
  const _articleList = () => {
    articleList(params.value).then(res => {
      if (params.value.page == 1) list.value = res.data.data
      else list.value = list.value.concat(res.data.data)
    })
  }
</script>

<style lang="scss" scoped>
  .home {
    min-height: 100vh;
    background: #fff;
  }

  .news-item {
    border-bottom: 1px solid #eaeaea;
    padding: 20rpx;
  }

  .send-btn {
    width: 690rpx;
    height: 90rpx;
    background: #F87610;
    border-radius: 50rpx;
    position: fixed;
    bottom: env(safe-area-inset-bottom);
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    line-height: 90rpx;
    font-size: 30rpx;
    font-weight: 500;
    color: #fff;
  }
</style>